<template>
	<view class="circle">
		<!-- <view class="nav_bar" style="background: #FFFFFF;">
			<uni-nav-bar color="#333" left-icon="left" title="选择圈子" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$util.back()"></uni-nav-bar>
		</view>

		<view class="nav_box"></view> -->

		<scroll-view scroll-y="true" @scrolltolower="onReach">
			<view class="empty" style="padding: 60rpx 0;" v-if="total == 0">
				<u-empty text="您当前没有圈子" mode="list" :icon="`${$util.prefix('public/empty.png')}`">
				</u-empty>
			</view>
			<view class="content flex_r_between">
				<view class="item" v-for="(item , index) in list" :key="index" @click="onSubmit(item)">
					<view class="image">
						<image :src="item.avatar" mode="aspectFill"></image>
					</view>
					<view class="name hidden">{{ item.name || '' }}</view>
				<!-- 	<view class="bottom flex_r_between">
						{{ item.member_count || 0 }}
					</view> -->
				</view>
			
			</view>
		</scroll-view>


	</view>
</template>

<script>
	export default {
		
		props: {
			pub_type: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				page: 1,
				total: 0,
				list: [],

				select_index: -1,
				
				// pub_type: 0,
			}
		},
		methods: {

			getList() {
				this.$get('/circle.circle/getPubCircleList', {
					page: this.page,
					pub_type: this.pub_type
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				});
			},

			onSubmit(item) {
				// let pages = getCurrentPages();
				// let nowPage = pages[pages.length - 1];
				// let prevPage = pages[pages.length - 2];
				// prevPage.$vm.selectCircle(item);
				this.$emit('selectCircle',item)
				// this.$util.back();
			},
			
			onReach() {
				if (this.total > this.list.length) {
					this.page++;
					this.getList();
				}
			},
		},

		onLoad(option) {
			this.pub_type = option.pub_type;
			this.getList();
		},
		
		created(option) {
			// this.pub_type
			this.getList();
		},

	}
</script>

<style lang="less" scoped>
	.circle {
		height: 100%;
	}
	
	scroll-view {
		height: 100%;
	}

	.content {
		padding: 24rpx 28rpx;
		flex-wrap: wrap;
		.item {
			width: 336rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			overflow: hidden;
			padding-bottom: 16rpx;

			.image {
				width: 336rpx;
				height: 336rpx;
				background: #D8D8D8;
				border-radius: 24rpx;
				overflow: hidden;

				image {
					width: 336rpx;
					height: 336rpx;
				}
			}

			.name {
				font-weight: 500;
				font-size: 30rpx;
				color: #131313;
				padding: 0 24rpx;
				margin: 16rpx 0;
			}

			.bottom {
				padding: 0 24rpx;
				font-size: 26rpx;
				color: #666666;
				flex: 1;

			}

		}

	}
</style>